<!DOCTYPE html>
<html>

	<head>
		<title></title>
		<meta charset="UTF-8">
		<script src="js/digit.js"></script>
		<script>
			function $$(id) {
				return document.getElementById(id);
			}
			window.onload = function() {
				var cnv = $$("canvas");
				var cxt = cnv.getContext("2d");
				var r = 10;

				window.setInterval(function() {
						cxt.clearRect(0, 0, cnv.width, cnv.height);
						var d = new Date();
//						var h = d.getHours();
//						var m = d.getMilliseconds();
						
						//h
						var h = d.getHours(); // 0-59  59/10=5.9
						var h1 = Math.floor(h % 10);
						var h10 = Math.floor(h / 10);
						drawDigit(cxt,h10,0);
						drawDigit(cxt,h1,7);
						
						drawDigit(cxt,"colon",14);
						
						//m
						var m = d.getMinutes(); // 0-59  59/10=5.9
						var m1 = Math.floor(m % 10);
						var m10 = Math.floor(m / 10);
						drawDigit(cxt,m10,18);
						drawDigit(cxt,m1,25);
						
						drawDigit(cxt,"colon",32);

						//s
						var s = d.getSeconds(); // 0-59  59/10=5.9
						var s1 = Math.floor(s % 10);
						var s10 = Math.floor(s / 10);
						drawDigit(cxt,s10,36);
						drawDigit(cxt,s1,43);
				},1000)
			}
		</script>
	</head>

	<body>
		<canvas id="canvas" width="1100" height="350"   style="border:1px solid silver;"></canvas>
		<p id="txt"></p>
	</body>

</html>